---
{
	"title": "Details closed",
	"language": "en",
	"category": "Plugins",
	"description": "Keep selected details elements closed on defined viewport and under.",
	"tag": "details-close",
	"parentdir": "details-close",
	"altLangPrefix": "details-close",
	"dateModified": "2025-08-27"
}
---
<div class="wb-prettify all-pre hide"></div>

<h2>Example of <code>details</code> element kept closed on small viewport and down (lg, md, sm, xs and xxs)</h2>
<p>Resize your browser to view the plugin at play.</p>
<details class="provisional wb-details-close" open>
	<summary>I am closed on mobile (default)</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="lg">
	<summary>I am closed on large breakpoint</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="md">
	<summary>I am closed on medium breakpoint</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="sm">
	<summary>I am opened on small breakpoint</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="xs">
	<summary>I am closed on extra-small breakpoint</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="xxs">
	<summary>I am opened on extra-extra-small breakpoint</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>

<h3>Source code</h3>
<pre><code>&lt;details class="wb-details-close" open&gt;
	&lt;summary&gt;I am closed on mobile (default)&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="lg"&gt;
	&lt;summary&gt;I am closed on large breakpoint&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="md"&gt;
	&lt;summary&gt;I am closed on medium breakpoint&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="sm"&gt;
	&lt;summary&gt;I am closed on small breakpoint&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="xs"&gt;
	&lt;summary&gt;I am closed on extra-small breakpoint&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="xxs"&gt;
	&lt;summary&gt;I am closed on extra-extra-small breakpoint&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
</code></pre>
